<!DOCTYPE html>
<html>
<head>
<title>获取时间</title>
<script type="text/javascript">
window.onload = function(){
showTime();
};
function showTime(){
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth() + 1;
var date = myDate.getDate();
var dateArr = ["Sun","Mon",'Tues','Wednes','Thurs','Fri','Satur'];
var day= myDate.getDay();
var hours = myDate.getHours();
var minutes = formatTime(myDate.getMinutes());
var seconds = formatTime(myDate.getSeconds());
var systemTime = document.getElementById("time");
systemTime.innerHTML = " " + dateArr[day] + "day " + hours + ":" + minutes + ":" + seconds;
setTimeout("showTime()",500);
}
//格式化时间：分秒。
function formatTime (i){
if(i < 10){
i = "0" + i;
}
return i;
}
</script>
</head>
<style>
#time {
text-align: center;
background: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-size: 200% 100%;
-webkit-animation: runs 3s infinite linear;
}
@-webkit-keyframes runs {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
</style>
<body>
<div id = "time"></div>
</body>
</html>

<!--效果：实时日期+时间，字体颜色为动态渐变色

设置-定制-设置-自定义css：
.bdSug_wpr td {
background: transparent !important;
}
.bdSug_wpr {
backdrop-filter: blur(10px);
background: transparent !important;
}
.search_bar {
box-shadow: 0 0 18px rgba(70,70,40,0.255);
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
background-color: rgba(255,255,255,.100);
box-shadow: 0.5px 0px 5px white,
0px 0.5px 5px white,
-0.5px 0px 5px white,
0px -0.5px 5px white;
border-radius: 50px;
display: table;
width: 80%;
height: 40px;
max-width: 400px;
margin: 10px auto;
text-align:center;
font-size:30px;
border:0;
outline:none;
font-weight:560;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
animation:search-bar 1s;
}
@keyframes search-bar
{0% {max-width: 150px;}
100% {max-width: 400px;}}
</style><script>document.title = "明月几时有？把酒问青天。";</script><style>
body {
background-position:top center;
background-size:100%;
}
#content {
position: fixed;
top: 140px;
}
#search_input {
background: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-size: 200% 100%;
-webkit-animation: runs 3s infinite linear;
}
@-webkit-keyframes runs {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
-->